import { Foldable, Button, Toast, TableList } from '../imports';
import { LIST_DATA } from './list';

export function FoldablePage() {
	let foldable: Foldable;
	return (
		<>
			<h1>折叠组件</h1>
			<Button
				onClick={() => {
					foldable.toggle();
				}}
			>
				普通
			</Button>
			<Foldable
				expanded
				ref={(f) => (foldable = f)}
				onFoldChanged={(expanded) => {
					Toast.show(`展开状态：${expanded}`);
				}}
			>
				<TableList
					rows={LIST_DATA}
					activable
					selectable
					// autoHeight
					column={{
						text: 'text',
						children: 'children',
						expand: 'expand',
					}}
				></TableList>
			</Foldable>
		</>
	);
}
